//gtc
import React, { Component, Fragment } from 'react';
import {Row, Col, Menu, message, Modal, Button, Form, Input, List} from 'antd'
import 'antd/dist/antd.css'
import './index.css'
import Header from '../../common/header'
import Footer from '../../common/footer'
import docCookies from "../../api/docCookies";
import Link from "react-router-dom/Link";
import {
    myMusicCreateSongList,
    myMusicMVAndSongList,
    myMusicSongList,
    myMusicMVList,
    getSongData,
    getSongUrlData,
    setSongSheet,
    myMusicEditSongList,
    myMusicRemoveSong,
    myMusicDeleteSongList, myMusicDeleteMV
} from "../../api";
import {YoutubeFilled} from "@ant-design/icons/lib/icons";
import {PlayCircleOutlined,PlusSquareOutlined,DeleteOutlined} from "@ant-design/icons/lib/icons";
import VideoCameraOutlined from "@ant-design/icons/lib/icons/VideoCameraOutlined";
import CustomerServiceOutlined from "@ant-design/icons/lib/icons/CustomerServiceOutlined";
import UserDefault from '../../source/user.png'
import SongDefault from '../../source/song.png'
import {withRouter} from "react-router-dom";
import SmileOutlined from "@ant-design/icons/lib/icons/SmileOutlined";

const { SubMenu } = Menu;

class MyMusic extends Component{

    constructor(props) {
        super(props);
        this.state = {
            selectId: '我的MV',
            collectModalVisible: false,
            displayMVDelete:"visible",
            songId: 0,
            mvId: 0,
            mvAndSongList: {
                mvTotal: 0,
                songListTotal: 0,
                songLists: []
            },
            mvLists: [],
            songLists:{
                nickname: "",
                songListName: "",
                songListPic: "",
                songTotal: 0,
                songs: [],
            }
        }
    }

    switchSecondTool = (songNum,songList) =>{
        for (let i=0;i<songNum;i++){
            let second = songList[i].songTime
            let minute = 0
            while (second>=60) {
                second = second - 60;
                minute = minute + 1;
            }
            if (minute<10) {
                minute = "0" + minute.toString()
            }else {
                minute = minute.toString()
            }
            if (second<10) {
                second = "0" + second.toString()
            }else{
                second = second.toString()
            }
            let time = minute + ' : ' + second
            songList[i].songTime = time
        }
    }

    componentDidMount() {

        this.csrf = localStorage.getItem("token") || docCookies.getItem("__csrf");
        let songSheetId = 0;
        if(this.props.location.search.match(/\d+/gi)) {
            songSheetId = parseInt(this.props.location.search.match(/\d+/gi).toString());
        }

        if(this.csrf){
            const user = localStorage.getItem("loginObj");
            const userId = JSON.parse(user)['userId'];
            if(songSheetId !== 0) {
                myMusicSongList(userId, songSheetId).then( (res)=>{
                    console.log("初始化我的歌单",res)
                    if(res.data.code === 200) {
                        this.switchSecondTool(res.data.songTotal,res.data.songLists)
                        this.props.getMyMusicSongListFunc(res.data)
                        this.setState({
                            songLists:{
                                nickname: res.data.nickname,
                                songListName: res.data.songListName,
                                songListPic: res.data.songListPic,
                                songTotal: res.data.songTotal,
                                songs: res.data.songLists,
                            }
                        })
                    }else if(res.data.code === 500){
                        console.log("请求错误...")
                    }else{
                        console.log("网络堵车~稍等")
                    }
                }).catch( err=>{
                    console.log(err);
                })
            }


            myMusicMVAndSongList(userId).then( (res)=>{
                console.log("初始化我的列表",res)
                if(res.data.code === 200) {
                    this.props.getMyMusicDefaultFunc(res.data)
                    this.setState({
                        mvAndSongList:{
                            mvTotal: res.data.mvTotal,
                            songListTotal:res.data.songListTotal,
                            songLists:res.data.songLists
                        }
                    })
                }else if(res.data.code === 500){
                    console.log("请求错误...")
                }else{
                    console.log("网络堵车~稍等")
                }
            } ).catch( err => {
                console.log(err);
            })


            myMusicMVList(userId).then( (res)=>{
                console.log("初始化我的MV",res)
                if(res.data.code === 200) {
                    this.props.getMyMusicMvListFunc(res.data)
                    this.setState({
                        mvLists: res.data.mvLists
                    })
                }else if(res.data.code === 500){
                    console.log("请求错误...")
                }else{
                    console.log("网络堵车~稍等")
                }
            }).catch( err=>{
                console.log(err);
            })
        }
    }

    refreshData = (songListId) => {
        let userId = JSON.parse(localStorage.getItem("loginObj")).userId

        myMusicMVAndSongList(userId).then( (res)=>{
            console.log("刷新我的列表",res)
            if(res.data.code === 200) {
                this.props.getMyMusicDefaultFunc(res.data)
                this.setState({
                    mvAndSongList:{
                        mvTotal: res.data.mvTotal,
                        songListTotal:res.data.songListTotal,
                        songLists:res.data.songLists
                    }
                })
            }else if(res.data.code === 500){
                console.log("请求错误...")
            }else{
                console.log("网络堵车~稍等")
            }
        } ).catch( err => {
            console.log(err);
        })

        if(songListId === 0) {
            myMusicMVList(userId).then( (res)=>{
                console.log("刷新我的MV",res)
                if(res.data.code === 200) {
                    this.props.getMyMusicMvListFunc(res.data)
                    this.setState({
                        mvLists: res.data.mvLists
                    })
                }else if(res.data.code === 500){
                    console.log("请求错误...")
                }else{
                    console.log("网络堵车~稍等")
                }
            } ).catch( err=>{
                console.log(err);
            } )
        } else {
            myMusicSongList(userId, songListId).then( (res)=>{
                console.log("刷新我的歌单",res)
                if(res.data.code === 200) {
                    this.switchSecondTool(res.data.songTotal,res.data.songLists)
                    this.props.getMyMusicSongListFunc(res.data)
                    this.setState({
                        songLists:{
                            nickname: res.data.nickname,
                            songListName: res.data.songListName,
                            songListPic: res.data.songListPic,
                            songTotal: res.data.songTotal,
                            songs: res.data.songLists,
                        }
                    })
                }else if(res.data.code === 500){
                    console.log("请求错误...")
                }else{
                    console.log("网络堵车~稍等")
                }
            } ).catch( err=>{
                console.log(err);
            } )
        }
    }


    showCollectModal = (id) => {
        this.setState({
            collectModalVisible: true,
            songId: id
        });
    };
    handleCollectModalCancel = e => {
        this.setState({
            collectModalVisible: false,
        });
    };
    //收藏到歌单
    handleAddSongSheet = (item) => {
        this.setState({
            collectModalVisible: false,
        });
        let songListId = parseInt(this.props.location.search.match(/\d+/gi).toString());

        setSongSheet(item.songListId, this.state.songId).then((res)=>{
            if(res.data.code === 200){
                message.info("收藏成功~")
                this.setState({
                    createSongListVisible : false
                })
                this.props.history.push(`/myMusic?id=${songListId}`)
                this.refreshData(songListId)
            }else if(res.data.code === 501){
                message.info("歌曲已存在,不能重复添加嗷~")
            }else if(res.data.code === 500){
                message.info("收藏失败！")
            }
        }).catch( (err)=>{
            message.info("网络堵车,请重新收藏歌曲嗷~")
            console.log( message )
        } )
    }

    showMVModal = () => {
        this.setState({
            mvModalVisible: true,
        });
    };
    onMVModalCancel = () => {
        this.setState({
            mvModalVisible: false,
        });
    };
    //删除MV
    handleMVDelete = (item) => {
        myMusicDeleteMV(item.mvId).then((res)=>{
            console.log(item)
            console.log(res)
            if(res.data.code === 200){
                message.info("删除成功~")
                this.setState({
                    createSongListVisible : false
                })
                this.props.history.push(`/myMusic?id=0`)
                this.refreshData(0)
            }else if(res.data.code === 502){
                message.info("MV不存在,无法删除嗷~")
            }else if(res.data.code === 500){
                message.info("删除失败！")
            }
        }).catch( (err)=>{
            message.info("网络堵车,请重新删除MV嗷~")
            console.log( message )
        } )
    }

    createSongList=()=>{
        this.setState({
            createSongListVisible:true
        })
    }
    onCreateSongListCancel=()=>{
        this.setState({
            createSongListVisible:false
        })
    }

    editSongList=()=>{
        this.setState({
            editSongListVisible:true
        })
    }
    onEditSongListCancel=()=>{
        this.setState({
            editSongListVisible:false
        })
    }

    deleteSongList=()=>{
        this.setState({
            deleteSongListVisible:true
        })
    }
    onDeleteSongListCancel=()=>{
        this.setState({
            deleteSongListVisible:false
        })
    }

    removeSong=(id)=>{
        this.setState({
            removeSongVisible:true,
            songId: id
        })
    }
    onRemoveSongCancel=()=>{
        this.setState({
            removeSongVisible:false
        })
    }

    //前往MV
    navigateToMV=(mvId)=>{
        this.props.history.push(`/mvDetail?id=${mvId}`);
    }
    //前往歌手
    navigateToSinger=(singerId)=>{
        console.log(singerId)
        this.props.history.push(`/acquire/artist?id=${singerId}`);
    }
    //前往歌曲
    navigateToSong=(songId)=>{
        this.props.history.push(`/song?id=${songId}`);
    }

    //创建歌单提交
    handleCreateSongListSubmit= () => {
        console.log("我来创建歌单了")
        const user = localStorage.getItem("loginObj");
        const userId = JSON.parse(user)['userId'];
        this.props.form.validateFields(["nameCreateSongList"], (err,values)=>{
            myMusicCreateSongList(userId,values.nameCreateSongList).then( (res)=>{
                console.log("创建歌单",res)
                if(res.data.code === 200){
                    message.info("创建成功~")
                    this.props.form.resetFields()
                    this.setState({
                        createSongListVisible : false
                    })
                    this.props.history.push("/myMusic?id=0")
                    this.refreshData(0)
                }else if(res.data.code === 501){
                    this.props.form.resetFields()
                    message.info("歌单已存在,换个名字吧~")
                }else if(res.data.code === 500){
                    this.props.form.resetFields()
                    message.info("创建失败！")
                }
            }).catch( (err)=>{
                message.info("网络堵车,请重新创建歌单嗷~")
                console.log( message )
            } )
        })
    }

    //编辑歌单提交
    handleEditSongListSubmit = () => {
        console.log("我来编辑歌单了")
        let songListId = parseInt(this.props.location.search.match(/\d+/gi).toString());
        const user = localStorage.getItem("loginObj");
        const userId = JSON.parse(user)['userId'];
        this.props.form.validateFields(["nameEditSongList"], (err,values)=>{
            myMusicEditSongList(userId,songListId,values.nameEditSongList).then( (res)=>{
                console.log("编辑歌单",res)
                if(res.data.code === 200){
                    message.info("编辑成功~")
                    this.props.form.resetFields()
                    this.setState({
                        editSongListVisible : false
                    })
                    this.props.history.push(`/myMusic?id=${songListId}`)
                    this.refreshData(songListId)
                }else if(res.data.code === 501){
                    this.props.form.resetFields()
                    message.info("歌单已存在,换个名字吧~")
                }else if(res.data.code === 502){
                    this.props.form.resetFields()
                    message.info("抱歉,歌单不存在啦~")
                }else if(res.data.code === 500){
                    this.props.form.resetFields()
                    message.info("创建失败！")
                }
            }).catch( (err)=>{
                message.info("网络堵车,请重新编辑歌单嗷~")
                console.log( message )
            } )
        })
    }

    //删除歌单提交
    handleDeleteSongListSubmit = () =>{
        console.log("我来删除歌单了")
        let songListId = parseInt(this.props.location.search.match(/\d+/gi).toString());
        const user = localStorage.getItem("loginObj");
        const userId = JSON.parse(user)['userId'];
        myMusicDeleteSongList(userId,songListId).then( (res)=>{
            console.log("删除歌单",res)
            if(res.data.code === 200){
                message.info("删除成功~")
                this.setState({
                    deleteSongListVisible : false
                })
                this.props.history.push(`/myMusic?id=0`)
                this.refreshData(0)
            }else if(res.data.code === 502){
                message.info("抱歉,歌单不存在啦~")
            }else if(res.data.code === 500){
                message.info("删除失败！")
            }
        }).catch( (err)=>{
            message.info("网络堵车,请重新删除歌单嗷~")
            console.log( message )
        } )
    }

    //删除歌曲提交
    handleRemoveSongSubmit = () =>{
        console.log("我来删除歌曲了")
        let songListId = parseInt(this.props.location.search.match(/\d+/gi).toString());
        const user = localStorage.getItem("loginObj");
        const userId = JSON.parse(user)['userId'];
        myMusicRemoveSong(userId,songListId,this.state.songId).then( (res)=>{
            console.log("删除歌曲",res)
            if(res.data.code === 200){
                message.info("删除成功~")
                this.setState({
                    removeSongVisible : false
                })
                this.props.history.push(`/myMusic?id=${songListId}`)
                this.refreshData(songListId)
            }else if(res.data.code === 503){
                message.info("抱歉,歌曲不存在啦~")
            }else if(res.data.code === 502){
                message.info("抱歉,歌单不存在啦~")
            }else if(res.data.code === 500){
                message.info("删除失败！")
            }
        }).catch( (err)=>{
            message.info("网络堵车,请重新删除歌曲嗷~")
            console.log( message )
        } )
    }


    // 开始播放歌曲
    startPlaySong = (songId) => {
        getSongUrlData(songId).then( (res) => {
            if(res.data.code === 200) {
                let arr = [];
                let storage =  JSON.parse(localStorage.getItem("songUrlData"));
                if(!storage) {
                    arr.push(res.data.data[0])
                    localStorage.setItem('songUrlData',JSON.stringify(arr))
                } else {
                    storage.push(res.data.data[0])
                    localStorage.setItem("songUrlData",JSON.stringify(storage))
                }
                docCookies.setItem("playing","PLAYING");
                this.forceUpdate();
            }else {
                message.info("请求数据失败")
            }
        } );


        // 请求歌曲,歌手的播放信息
        getSongData(songId).then( (res) => {
            if(res.data.code===200) {
                let arr = [];
                let storage =  JSON.parse(localStorage.getItem("songInfoData"));
                if(!storage) {
                    arr.push(res.data.songs[0])
                    localStorage.setItem('songInfoData',JSON.stringify(arr))
                    this.forceUpdate();
                }else {
                    storage.push(res.data.songs[0])
                    localStorage.setItem("songInfoData",JSON.stringify(storage))
                }
            }else {
                message.info("请求歌手歌曲数据失败,请重新尝试")
            }
        })
    };


    render() {
        let csrf = localStorage.getItem("token") || docCookies.getItem("__csrf");

        let songSheetId = 0;
        if(this.props.location.search.match(/\d+/gi)) {
            songSheetId = parseInt(this.props.location.search.match(/\d+/gi).toString());
        }

        //歌单具体列表
        const myMusicSongList = this.state.mvAndSongList.songLists.map( (item,index)=>{
            return(
                <Menu.Item key={item.songListId}>
                    <Link
                        to={`/myMusic?id=${item.songListId}`}
                        onClick={() => this.refreshData(item.songListId)}
                    >
                        <Col span={12} style={{ }}>
                            {item.songListName}
                        </Col>
                        <Col span={12} style={{ textAlign:"right",paddingRight:"0.5vw" }}>
                            {item.songTotal}
                        </Col>
                    </Link>
                </Menu.Item>
            )
        })


        //MV具体信息
        const renderMvList = this.state.mvLists.map( (item,index)=>{
            return (
                <Fragment key={index} >
                    {
                        (index+1) % 4 === 1
                        ? <Col span={1}></Col>
                        : null
                    }
                    <Col
                        span={5}
                        style={{ position:"relative",marginLeft:"1.0416%",marginRight:"1.0416%" }}
                    >
                        <div className="mvList-mv">
                            <img
                                style={{ width:"100%",height:"18vh",borderRadius:"4px",cursor:"pointer",zIndex:1,position:"relative" }}
                                alt=""
                                src={'http://cyq.center:8000/'+item.mvPicUrl}
                                title={item.mvName}
                                onClick={ ()=>this.navigateToMV(item.mvId) }
                            />
                        </div>
                        <div style={{ zIndex:2,position:"absolute",right:0,top:0,fontSize:"2.8vh",textAlign:"right",paddingLeft:"10%",paddingRight:"5%" }}>
                            <YoutubeFilled style={{ fontSize:"2.8vh",paddingRight:"5%" }}/>{item.mvPlayCount}
                        </div>
                        <div className="list-content">
                            <div
                                onClick={ ()=>this.navigateToMV(item.mvId) }
                                style={{ marginTop:"1vh",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontSize:"2.4vh",cursor:"pointer" }}>
                                {item.mvName}
                            </div>
                        </div>
                        <div className="list-content">
                            <div
                                onClick={ ()=>this.navigateToSinger(item.singerId) }
                                style={{ overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontSize:"2.4vh",cursor:"pointer" }}>
                                {item.mvSinger}
                            </div>
                        </div>
                    </Col>
                    {
                        (index+1)%4===0?
                            <Col span={1} flex={100} style={{ position:"relative",height:"30vh" }}></Col>
                            :null
                    }
                </Fragment>
            )
        } )

        //歌单信息
        const handleMyMusicSongData = this.state.songLists.songs.map( (item,index)=>{
            return(
                <Fragment key={index} >
                    <div style={{ background:"#fff",marginLeft:"2vw",marginTop:"2vh",height:"9vh",boxShadow:"0px 0px 5px 0.1px black" }}>
                        <Col span={1} style={{ height:"9vh",textAlign:"center",lineHeight:"9vh",fontSize:"2.6vh" }}>{index+1}</Col>
                        <Col span={9}
                             title={item.songName}
                             style={{ height:"9vh",lineHeight:"9vh",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",cursor:"pointer",fontSize:"2.6vh" }}
                             onClick={ ()=>this.navigateToSong(item.songId) }
                        >
                            <div className="list-content" ><div>{item.songName}</div></div>
                        </Col>
                        <Col span={3} style={{ height:"9vh",lineHeight:"10vh" }}>
                            <div className="icon">
                                <PlayCircleOutlined title={"播放"} onClick={()=>this.startPlaySong(item.songId)} style={{ color:"#02c0cf",fontSize:"3.6vh",marginRight:"1vw",cursor:"pointer" }}/>
                                <PlusSquareOutlined title={"收藏"} onClick={()=>this.showCollectModal(item.songId)} style={{ color:"#02c0cf",fontSize:"3.6vh",marginRight:"1vw",cursor:"pointer" }}/>
                                <DeleteOutlined title={"删除"} onClick={()=>this.removeSong(item.songId)} style={{ color:"#02c0cf",fontSize:"3.6vh",cursor:"pointer" }}/>
                            </div>
                        </Col>
                        <Col span={4}
                             title={item.singerName}
                             style={{ height:"9vh",lineHeight:"9vh",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",cursor:"pointer",fontSize:"2.6vh" }}
                             onClick={ ()=>this.navigateToSinger(item.singerId) }
                        >
                            <div className="list-content" ><div>{item.singerName}</div></div>
                        </Col>
                        <Col span={1} style={{ height:"9vh",}}></Col>
                        <Col span={4}
                             style={{ height:"9vh",lineHeight:"9vh",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontSize:"2.6vh" }}>
                            <div>{item.albumName}</div>
                        </Col>
                        <Col span={2} style={{ height:"9vh",textAlign:"center",lineHeight:"9vh",fontSize:"2.6vh" }}>{item.songTime}</Col>
                    </div>
                </Fragment>
            )
        })

        const { getFieldDecorator } = this.props.form;

        return(
            <div>
                {/* 新建歌单的弹出框 */}
                <Modal
                    title={"新建歌单"}
                    visible={this.state.createSongListVisible}
                    onCancel={ ()=>this.onCreateSongListCancel() }
                    footer={[
                        <Button
                            type="primary"
                            key='confirm'
                            style={{ float:"right" }}
                            htmlType="submit"
                            onClick={this.handleCreateSongListSubmit}
                        >
                            确定
                        </Button>,
                        <div key='clear' style={{ clear:"both" }}></div>
                    ]}
                    width={350}
                >
                    <div style={{ textAlign:"center",paddingTop:"30px" }}>
                        <Form>
                            <Form.Item>
                                {
                                    getFieldDecorator('nameCreateSongList',{
                                        rules: [{ required: true, message: '歌单名不能为空' },
                                            {pattern:/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/g,message:"歌单名不能含有非法字符"},
                                            {max:10,message: '最长10个字符'}]
                                    })(
                                        <Input placeholder="请输入歌单名"  style={{ width:"100%" }} />
                                    )
                                }
                            </Form.Item>
                        </Form>
                    </div>
                </Modal>

                {/* 编辑歌单名的弹出框 */}
                <Modal
                    title={"编辑歌单"}
                    visible={this.state.editSongListVisible}
                    onCancel={ ()=>this.onEditSongListCancel() }
                    footer={[
                        <Button
                            type="primary"
                            key='confirm'
                            style={{ float:"right" }}
                            htmlType="submit"
                            onClick={this.handleEditSongListSubmit}
                        >
                            确定
                        </Button>,
                        <div key='clear' style={{ clear:"both" }}></div>
                    ]}
                    width={350}
                >
                    <div style={{ textAlign:"center",paddingTop:"30px" }}>
                        <Form>
                            <Form.Item>
                                {
                                    getFieldDecorator('nameEditSongList',{
                                        rules: [{ required: true, message: '歌单名不能为空' },
                                            {pattern:/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/g,message:"歌单名不能含有非法字符"},
                                            {max:10,message: '最长10个字符'}]
                                    })(
                                        <Input placeholder="请输入歌单名"  style={{ width:"100%" }} />
                                    )
                                }
                            </Form.Item>
                        </Form>
                    </div>
                </Modal>

                {/* 删除歌单的弹出框 */}
                <Modal
                    title={"删除歌单"}
                    visible={this.state.deleteSongListVisible}
                    onCancel={ ()=>this.onDeleteSongListCancel() }
                    footer={[
                        <Button
                            type="primary"
                            key='confirm'
                            style={{ float:"right" }}
                            htmlType="submit"
                            onClick={this.handleDeleteSongListSubmit}
                        >
                            确定
                        </Button>,
                        <div key='clear' style={{ clear:"both" }}></div>
                    ]}
                    width={350}
                >
                    <div style={{ textAlign:"center" }}>
                        确定删除该歌单吗?
                    </div>
                </Modal>

                {/* 删除歌曲的弹出框 */}
                <Modal
                    title={"删除歌曲"}
                    visible={this.state.removeSongVisible}
                    onCancel={ ()=>this.onRemoveSongCancel() }
                    footer={[
                        <Button
                            type="primary"
                            key='confirm'
                            style={{ float:"right" }}
                            htmlType="submit"
                            onClick={this.handleRemoveSongSubmit}
                        >
                            确定
                        </Button>,
                        <div key='clear' style={{ clear:"both" }}></div>
                    ]}
                    width={350}
                >
                    <div style={{ textAlign:"center" }}>
                        确定删除这首歌吗?
                    </div>
                </Modal>

                {/* 收藏到歌单的弹出框 */}
                <Modal
                    title='收藏到歌单'
                    visible={this.state.collectModalVisible}
                    onCancel={this.handleCollectModalCancel}
                    footer={[
                        <Button
                            type="primary"
                            key='confirm'
                            style={{ float:"right" }}
                            htmlType="submit"
                            onClick={this.handleCollectModalCancel}
                        >
                            确定
                        </Button>,
                        <div key='clear' style={{ clear:"both" }}></div>
                    ]}
                    width={350}
                    style={{ marginBottom:"20vh" }}
                >
                    <List
                        size="small"
                        bordered
                        dataSource={this.state.mvAndSongList.songLists}
                        renderItem={item =>
                            <List.Item
                                actions={[<a style={{ color:"#02c0cf" }} onClick={()=>this.handleAddSongSheet(item)}>添加</a>]}
                            >
                                <div>{item.songListName +" ( "+ item.songTotal +" )"}</div>
                            </List.Item>
                        }
                    />
                </Modal>

                {/* 删除MV的弹出框 */}
                <Modal
                    title='删除MV'
                    visible={this.state.mvModalVisible}
                    onCancel={this.onMVModalCancel}
                    footer={[
                        <Button
                            type="primary"
                            key='confirm'
                            style={{ float:"right" }}
                            htmlType="submit"
                            onClick={this.onMVModalCancel}
                        >
                            确定
                        </Button>,
                        <div key='clear' style={{ clear:"both" }}></div>
                    ]}
                    width={350}
                    style={{ marginBottom:"20vh" }}
                >
                    <List
                        size="small"
                        bordered
                        dataSource={this.state.mvLists}
                        renderItem={item =>
                            <List.Item
                                actions={[<a style={{ color:"#02c0cf" }} onClick={()=>this.handleMVDelete(item)}>删除</a>]}
                            >
                                <div>{item.mvName +" ( "+ item.mvSinger +" )"}</div>
                            </List.Item>
                        }
                    />
                </Modal>

                {
                    csrf
                    ?
                        <div className="myMusic-login" style={{ backgroundColor:"#fff"}}>
                            {/*已登录的页面*/}
                            <div className='myMusic-header' style={{ backgroundColor:"#242400",color:"#fff",position:"fixed",zIndex:10,top:"0",width:"100%" }}>
                                <Header />
                            </div>

                            <div className="myMusic-login-content" style={{ marginTop:"13vh" }}>
                                <Row>
                                    <Col span={2} style={{ backgroundColor:"#fff" }}></Col>

                                    <Col span={5}>
                                        <div
                                            className='myMusic-scrollbar'
                                            style={{
                                                overflow: "auto",
                                                position: "fixed",
                                                left: "8.333%",
                                                height: "77vh",
                                                width:"20.833%",
                                                backgroundColor:"#fff",
                                                boxShadow:"-2px 0px 5px 0.1px black",
                                            }}
                                        >
                                            <Menu
                                                mode="inline"
                                                defaultSelectedKeys={[this.state.selectId]}
                                                defaultOpenKeys={['我的歌单']}
                                                style={{ backgroundColor:"#fff",marginTop:"6vh",marginBottom:"6vh" }}
                                            >
                                                <Menu.Item key="我的MV" style={{  }}>
                                                    <Link
                                                        to={`/myMusic?id=0`}
                                                        onClick={() => this.refreshData(0)}
                                                    >
                                                        <Col span={12} style={{ }}>我的MV</Col>
                                                        <Col span={12} style={{ textAlign:"right",paddingRight:"1vw" }}>{this.state.mvAndSongList.mvTotal}</Col>
                                                    </Link>
                                                </Menu.Item>
                                                <SubMenu key="我的歌单"
                                                    title={
                                                        <Row>
                                                            <Col span={12} style={{ }}>我的歌单</Col>
                                                            <Col span={12} style={{ textAlign:"right",paddingRight:"1vw" }}>{this.state.mvAndSongList.songListTotal}</Col>
                                                        </Row>
                                                    }
                                                >
                                                    <Menu.Item
                                                        key="新建歌单"
                                                        onClick={()=>this.createSongList()}
                                                    >
                                                        +新建歌单
                                                    </Menu.Item>
                                                    {
                                                        this.state.songListTotal === 0
                                                            ? null
                                                            : myMusicSongList
                                                    }

                                                </SubMenu>
                                            </Menu>
                                        </div>
                                    </Col>

                                    <Col span={15} style={{ backgroundColor:"#fff" }}>

                                        {
                                            songSheetId && songSheetId !== 0
                                            ?
                                                //歌单具体信息
                                                <div>
                                                    <Row style={{ marginTop:"6vh",marginBottom:"6vh",height:"38vh" }}>
                                                        <Col span={1}></Col>
                                                        <Col span={7} style={{ textAlign:"center" }}>
                                                            {
                                                                this.state.songLists.songTotal === 0
                                                                    ?<img
                                                                        style={{ width:"16vw",height:"16vw", }}
                                                                        alt=""
                                                                        src={SongDefault}
                                                                    />
                                                                    :<img
                                                                        style={{ width:"16vw",height:"16vw", }}
                                                                        alt=""
                                                                        src={'http://cyq.center:8000/'+this.state.songLists.songListPic}
                                                                    />
                                                            }
                                                        </Col>
                                                        <Col span={1}></Col>
                                                        <Col span={14} style={{  }}>
                                                            <Row style={{ height:"10vh",marginTop:"2vh" }}>
                                                                <div style={{ display:"inline" }}>
                                                                    <span style={{ fontSize:"2.5vh",paddingLeft:"2%",paddingRight:"2%",paddingTop:"1%",paddingBottom:"1%",backgroundColor:"#000",color:"#fff",borderRadius:"10%" }}>
                                                                        歌单
                                                                    </span>
                                                                    <span style={{ paddingLeft:"1vw",fontSize:"3vh" }}>{this.state.songLists.songListName}</span>
                                                                </div>
                                                            </Row>
                                                            <Row style={{ height:"12vh" }}>
                                                                <div style={{ display:"inline" }}>
                                                                    {
                                                                        'http://cyq.center:8000/'+JSON.parse(localStorage.getItem("loginObj")).portrait === 'http://cyq.center:8000/'
                                                                            ?<img
                                                                                style={{ width:"4vw",height:"4vw" }}
                                                                                alt=""
                                                                                src={UserDefault}
                                                                            />
                                                                            :<img
                                                                                style={{ width:"4vw",height:"4vw" }}
                                                                                alt=""
                                                                                src={'http://cyq.center:8000/'+JSON.parse(localStorage.getItem("loginObj")).portrait}
                                                                            />
                                                                    }
                                                                    <span style={{ paddingLeft:"1vw",fontSize:"3vh" }}>{this.state.songLists.nickname}</span>
                                                                </div>
                                                            </Row>
                                                            <Row>
                                                                <div className="playText" onClick={()=>this.editSongList()} style={{marginRight:"15px"}}>
                                                                    编辑
                                                                </div>
                                                                <div className='playText' onClick={()=>this.deleteSongList()} style={{marginRight:"15px"}}>
                                                                    删除
                                                                </div>
                                                            </Row>
                                                        </Col>
                                                        <Col span={1}></Col>
                                                    </Row>
                                                    <Row>
                                                        <Row style={{ marginBottom:"3vh" }}>
                                                            <Col span={1}></Col>
                                                            <Col span={23}>
                                                                <Row style={{ height:"2px",backgroundColor:"#000" }}></Row>
                                                            </Col>
                                                        </Row>
                                                        <Row style={{ height:"6vh",marginBottom:"1vh" }}>
                                                            <Col span={1}></Col>
                                                            <Col span={23}>
                                                                <div>
                                                                    <span style={{ fontSize:"22px" }}>歌曲列表</span>
                                                                    <span style={{ fontSize:"13px",marginLeft:"2vw" }}>{this.state.songLists.songTotal}首歌</span>
                                                                </div>
                                                            </Col>
                                                        </Row>
                                                        <Row>
                                                            {
                                                                handleMyMusicSongData.length>0?
                                                                    <div style={{ marginBottom:"15vh" }}>
                                                                        <Row>
                                                                            {
                                                                                handleMyMusicSongData
                                                                            }
                                                                        </Row>
                                                                    </div>
                                                                    :
                                                                    <div style={{ marginBottom:"15vh",textAlign:"center" }}>
                                                                        <Row ><CustomerServiceOutlined  style={{ fontSize:"20vh" }}/></Row>
                                                                        <Row style={{ fontSize:"3vh" }}>暂无歌曲,快去收藏吧~</Row>
                                                                    </div>
                                                            }
                                                        </Row>
                                                    </Row>
                                                </div>
                                            :
                                                //MV具体信息
                                                <div>
                                                    <Row style={{ height:"10vh",marginTop:"6vh" }}>
                                                        <Col span={12} style={{ marginLeft:"5.2083%" }}>
                                                            <div style={{ fontSize:"3.5vh" }}>我的MV</div>
                                                        </Col>
                                                        <Col style={{ marginRight:"5.2083%",textAlign:"right" }}>
                                                            <div className='playText' onClick={()=>this.showMVModal()} style={{marginRight:"15px"}}>
                                                                删除
                                                            </div>
                                                        </Col>
                                                    </Row>
                                                    {
                                                        renderMvList.length>0
                                                        ?
                                                            <div style={{ marginBottom:"15vh" }}>
                                                                <Row>
                                                                    {
                                                                        renderMvList
                                                                    }
                                                                </Row>
                                                            </div>
                                                        :
                                                            <div style={{ marginTop:"15vh",textAlign:"center" }}>
                                                                <Row ><VideoCameraOutlined style={{ fontSize:"20vh" }}/></Row>
                                                                <Row style={{ fontSize:"3vh" }}>暂无MV,快去收藏吧~</Row>
                                                            </div>
                                                    }
                                                </div>
                                        }
                                    </Col>
                                    <Col span={2} style={{ backgroundColor:"#fff" }}></Col>
                                </Row>
                            </div>
                        </div>

                        :

                        <div className="myMusic-notLogin">
                            {/*未登录的页面*/}
                            <div className='myMusic-header' style={{ backgroundColor:"#242400",color:"#fff",position:"fixed",zIndex:10,top:"0",width:"100%" }}>
                                <Header />
                            </div>
                            <div className='myMusic-notLogin-content' style={{ marginTop:"15vh",textAlign:"center",paddingTop:"10vh",paddingBottom:"10vh" }} >
                                <Row ><SmileOutlined style={{ fontSize:"20vh" }}/></Row>
                                <Row style={{ fontSize:"3vh" }}>登录解锁更多精彩内容~</Row>
                            </div>
                            <div className='myMusic-footer'>
                                <Footer/>
                            </div>
                        </div>
                }
            </div>
        )
    }
}

export default Form.create()(withRouter(MyMusic));
